/*
描述：登录主组件，处理用户登录逻辑，包括表单验证、API请求和用户信息存储
完成人：吴悠
完成时间: 2025/04/27
*/


<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import router from "@/router";

const goToHome = () => {
  router.push('/home');
};
interface UserData {
  username: string;
  password: string;
  type: number;
}

// 定义API响应接口
interface ApiResponse {
  msg: string;
  code: number;
  data: {
    id: number;
    username: string;
    type: number;
    token: string;
    avatar: string;
    nickname: string;
  };
}

// 表单数据
const formData = ref<UserData>({
  username: '',
  password: '',
  type: 0, // 默认值
});


// 错误信息状态
const errorMessage = ref<string | null>(null);

// 登录
const handleSignUp = async () => {
  try {
    // 验证表单数据
    if (!formData.value.username || !formData.value.password) {
      errorMessage.value = '请完整填写登录信息。';
      return;
    }
    // API请求配置
    const options = {
      method: 'GET' as const,
      url: 'http://localhost:8089/user/login',
      params: {
        username: formData.value.username,
        password: formData.value.password,
        type: formData.value.type,
      },
      headers: {
        Accept: '*/*',
      }
    };

    // 发起API请求
    const response = await axios.request<ApiResponse>(options);

    // 检查响应是否成功
    if (response.data.code === 1) {
      // 仅将token存储到localStorage
      localStorage.setItem('token', response.data.data.token);
      localStorage.setItem('username', response.data.data.username);
      localStorage.setItem('id', response.data.data.id.toString());
      localStorage.setItem('type', response.data.data.type.toString());
      localStorage.setItem('avatar', response.data.data.avatar);
      localStorage.setItem('nickname', response.data.data.nickname);
      goToHome();


      // 清空表单
      formData.value = { username: '', password: '', type:0};
    } else {
      errorMessage.value = '失败，请重试。';
    }
  } catch (error) {
    console.error(error);
    errorMessage.value = '登录过程中发生错误，请重试。';
  }
};

// 设置用户类型
const setUserType = (type: number) => {
  formData.value.type = type;
};
</script>

<template>

  <div class="signup-container">

    <h1>登录</h1>
    <p class="terms">
      点击“登录”即表示你同意已阅读我们的隐私政策、服务和协议。
    </p>
    <!-- 用户名输入 -->
    <label for="username">用户名</label>
    <el-input
        v-model="formData.username"
        style="width: 400px"
        placeholder="请输入用户名"
        clearable
    />

    <!-- 密码输入 -->
    <label for="password">密码</label>

    <el-input
        v-model="formData.password"
        style="width: 400px"
        type="password"
        placeholder="请输入密码"
        show-password
    />


    <!-- 用户类型选择 -->
    <div class="type-selection">
      <label>用户类型</label>
      <div class="type-buttons">
        <el-button
            :class="{ active: formData.type === 1 }"
            @click="setUserType(1)"
        >
          管理员
        </el-button>
        <el-button
            :class="{ active: formData.type === 0 }"
            @click="setUserType(0)"
        >
          普通用户
        </el-button>
      </div>
    </div>

    <!-- 错误信息 -->
    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>

    <!-- 登录按钮 -->
    <el-button
        class="signup-button"
        @click="handleSignUp"
    >
      登录
    </el-button>

  </div>
</template>

<style scoped>
.signup-container {
  max-width: 480px;
  padding: 32px;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: left;
}

h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.terms {
  font-size: 11.2px;
  color: #6b7280;
  margin-top: 16px;
  margin-bottom: 24px;
}

label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  margin-top: 8px;
}





.type-selection {
  margin-bottom: 16px;
}

.type-buttons {
  display: flex;
  gap: 8px;
}

.type-buttons button {
  flex: 1;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: white;
  cursor: pointer;
}

.type-buttons button.active {
  background-color: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.error-message {
  color: #ef4444;
  font-size: 14px;
  margin-bottom: 16px;
}

.signup-button {
  width: 400px;
  padding: 12px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 16px;
}

.signup-button:hover {
  background-color: #2563eb;
}
</style>
